<!DOCTYPE html>
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!-->
<html class="js no-touch csstransitions" lang="en">
<!--<![endif]-->
	<include file="Public:Head" />
	<link rel="stylesheet" type="text/css" href="__PUBLIC__/css/jquery.dataTables.min.css">
	<link rel="stylesheet" type="text/css" href="__PUBLIC__/css/buttons.dataTables.min.css">
	<link rel="stylesheet" type="text/css" href="__PUBLIC__/css/buttons.bootstrap.min.css">
	<body class="no-trans fixed-header-on" style="height:100%">
		<if condition="$condition eq 1" >
			<include file="Public:loginHeader" />
		<else />
			<include file="Public:notloginHeader" />
		</if>
		<script type="text/javascript" language="javascript" src="__PUBLIC__/js/jquery.dataTables.min.js"></script>
		<script type="text/javascript" language="javascript" src="__PUBLIC__/js/dataTables.buttons.min.js"></script>
		<script type="text/javascript" language="javascript" src="__PUBLIC__/js/buttons.bootstrap.min.js"></script>
		<script type="text/javascript" language="javascript" src="__PUBLIC__/js/buttons.colVis.min.js"></script>
		<script type="text/javascript" language="javascript" src="__PUBLIC__/js/buttons.html5.min.js"></script>
		 <!-- 正文部分 -->
		<div id="aboutSec" class="section clearfix " style="min-height: 85.5%; margin-top: 5%;">
			<div class="container" style="width:1620px;">
				<div class="row">
					<div class="col-md-12">
						<h1 id="search" class="title text-center"><span>PIM</span></h1>
						<p class="lead text-center">Primer Information Manager</p>
					</div>
				</div>
				<br /><br />
				<div class="row">
			        <div id="brower">
			        	<table class="table table-condensed" id="brower-manage">
						    <thead>
						        <tr>
									<th style="width:15px;display: none;"></th>
									<th>Primer ID</th>
									<th>Gene</th>
									<th>Species</th>

									<th>Forward Primer</th>
									<th>Reverse Primer</th>
									<th>TM</th>
									<th>Product GC(%) </th>
									<th>Product Length</th>
									<th>Describe</th>
									<th>Location</th>
									<th>Identifier</th>
									<th>Upload Date</th>
									<th>Manage</th>

						        </tr>
						    </thead>
						    <tbody>
						    	<volist name="result" id="vo">
						    		<tr>
										<th style="width:15px;display: none;"><input class="checkbox" type="checkbox" id="{$vo.id}" name="selected" autocomplete="off"></th>
										<td>{$vo.primerid}</td>
										<td>{$vo.gene}</td>
										<td>{$vo.species}</td>

										<td>{$vo.forwardprimer}</td>
										<td>{$vo.reverseprimer}</td>
										<td>{$vo.tm}</td>
										<td>{$vo.productgc}</td>
										<td>{$vo.productlength}</td>
										<td>{$vo.describe}</td>
										<td>{$vo.location}</td>
										<td>{$vo.identifier}</td>
										<td>{$vo.uploaddate}</td>
										<if condition="$username eq $vo['user']">
											<td>
												<button type="button" class="btn btn-primary btn-block" data-toggle="modal" data-target="#editModal" data-id="{$vo.id}">Edit</button>
												<button type="button" class="btn btn-danger btn-block" data-toggle="modal" data-target="#deleteModal" data-id='{$vo.primerid}'>Delete</button>
											</td>
										<elseif condition="$username eq 'root'" />
											<td>
												<button type="button" class="btn btn-primary btn-block" data-toggle="modal" data-target="#editModal" data-id="{$vo.id}">Edit</button>
												<button type="button" class="btn btn-danger btn-block" data-toggle="modal" data-target="#deleteModal" data-id='{$vo.primerid}'>Delete</button>
											</td>
										<else />
											<td>
												<button type="button" class="btn btn-primary btn-block disabled" >Edit</button>
												<button type="button" class="btn btn-danger btn-block disabled" >Delete</button>
											</td>
										</if>
									</tr>
						    	</volist>
						    </tbody>
						</table>
			        </div>
				</div>
			</div>
		</div>

		<!-- delete Modal -->
		<div class="modal fade" id="deleteModal" role="dialog">
			<div style="display:table; width:100%; height: 100%">
				<div style="vertical-align: middle;display: table-cell;">
					<div class="modal-dialog modal-sm" style="width:313px;">
						<div class="modal-content" data-whatever="delete">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
								<h4 class="modal-title" style="font-size: 18px;color: #000;">Delete</h4>
							</div>

							<div class="modal-body">
								<section class="box-delete v5-input-txt" id="box-delete">
									<form id="delete-form" method="post" action="__ROOT__/home/Manage/delete">
										<input id="delete-input" name="primerid" style="display: none;">
										<h3 class="text-center">Are You Sure?</h3>
									</form>
								</section>
							</div>

							<div class="modal-footer">
								<button id="delete-btn" type="button" style="float: left;width: 48%;" class="btn btn-danger" onclick="deletePrimer()">Yes</button>
								<button id="cancel-btn" type="button" style="margin-left:52%;width: 48%;" class="btn btn-micv5 btn-block globalLogin" data-dismiss="modal"">Cancel</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- edit Modal -->
		<div class="modal fade" id="editModal" role="dialog">
			<div style="display: table;width: 100%;height: 100%;">
				<div style="vertical-align: middle;display: table-cell;">
					<div class="modal-dialog modal-sm" style="width:550px;">
						<div class="modal-content" data-whatever="edit">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
								<h4 class="modal-title" style="font-size: 18px;color: #000;">Edit</h4>
							</div>

							<div class="modal-body">
								<form class="form-horizontal" id="edit-form" method="post" action="__ROOT__/home/Manage/edit">
									<div class="form-group">
										<label class="col-sm-3 control-label">Primer Id: <span class="required">*</span></label>
										<div class="col-sm-6" style="width: 70%">
											<input type="text" class="form-control" id="primerid" name="primerid" required readonly />
										</div>
									</div>
									<div class="form-group">
										<label class="col-sm-3 control-label">Gene: <span class="required">*</span></label>
										<div class="col-sm-6" style="width: 70%">
											<input type="text" class="form-control" id="gene" name="gene" required readonly />
										</div>
									</div>
									<div class="form-group">
										<label class="col-sm-3 control-label">Species: <span class="required">*</span></label>
										<div class="col-sm-6" style="width: 70%">
											<input type="text" class="form-control" id="species" name="species" required readonly />
										</div>
									</div>
									<div class="form-group">
										<label class="col-sm-3 control-label">Forward Primer: <span class="required">*</span></label>
										<div class="col-sm-6" style="width: 70%;padding-top: 8px;">
											<!-- <input type="text" class="form-control" id="forward-primer" name="forwardprimer" required onfocus="focusOn(this)" onblur="checkForwardPrimer(this)"/> -->
											<input type="text" class="form-control" id="forward-primer" name="forwardprimer" required onfocus="focusOn(this)" onblur="checkForwardPrimer(this)"/>
											<div class="error-tips error-forwardprimer" style="display:none;"></div>
										</div>
									</div>
									<div class="form-group">
										<label class="col-sm-3 control-label">Reverse Primer: <span class="required">*</span></label>
										<div class="col-sm-6" style="width: 70%;padding-top: 10px;">
											<input type="text" class="form-control" id="reverse-primer" name="reverseprimer" required onfocus="focusOn(this)" onblur="checkReversePrimer(this)"/>
											<div class="error-tips error-reverseprimer" style="display:none;"></div>
										</div>
									</div>
									<div class="form-group">
										<label class="col-sm-3 control-label">TM: </label>
										<div class="col-sm-6" style="width: 70%">
											<input type="text" class="form-control" id="tm" name="tm" />
											<div class="error-tips error-tm" style="display:none;"></div>
										</div>
									</div>
									<div class="form-group">
										<label class="col-sm-3 control-label">Product GC(%): </label>
										<div class="col-sm-6" style="width: 70%;padding-top: 2px;">
											<input type="text" class="form-control" id="productgc" name="productgc" />
											<div class="error-tips error-productgc" style="display:none;"></div>
										</div>
									</div>
									<div class="form-group">
										<label class="col-sm-3 control-label">Product Length: </label>
										<div class="col-sm-6" style="width: 70%;padding-top: 12px;">
											<input type="text" class="form-control" id="productlength" name="productlength" />
											<div class="error-tips error-productlength" style="display:none;"></div>
										</div>
									</div>
									<div class="form-group">
										<label class="col-sm-3 control-label">Location: <p class="small-font" style="font-style: oblique;">(example:loc_lab104)</p></label>
										<div class="col-sm-6" style="width: 70%;padding-top: 8px;">
											<input type="text" class="form-control" id="location" name="location" onblur="checkLocation(this)" />
											<div class="error-tips error-location" style="display:none;"></div>
										</div>
									</div>
									<div class="form-group">
										<label class="col-sm-3 control-label">Identifier: <p class="small-font" style="font-style: oblique;">(example:Id_xxx)</p></label>
										<div class="col-sm-6" style="width: 70%;padding-top: 8px;">
											<input type="text" class="form-control" id="identifier" name="identifier" onblur="checkIdentifier(this)" />
											<div class="error-tips error-identifier" style="display:none;"></div>
										</div>
									</div>
									<div class="form-group">
										<label class="col-sm-3 control-label">Describe: </label>
										<div class="col-sm-6" style="width: 70%;padding-top: 8px;">
											<textarea class="form-control" id="describe" name="describe"></textarea>
										</div>
									</div>

								</form>
							</div>
							<div class="modal-footer">
								<button id="edit-btn" type="button" style="float: left;width: 48%;" class="btn btn-danger" onclick="editPrimer()">Update</button>
								<button id="cancel-btn" type="button" style="margin-left:52%;width: 48%;" class="btn btn-micv5 btn-block globalLogin" data-dismiss="modal"">Cancel</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- upload Modal -->
		<div class="modal fade" id="uploadModal" role="dialog">
			<div style="display: table;width: 100%;height: 100%;">
				<div style="vertical-align: middle;display: table-cell;">
					<div class="modal-dialog modal-sm" style="width:550px;">
						<div class="modal-content" data-whatever="upload">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
								<h4 class="modal-title" style="font-size: 18px;color: #000;">Upload
								<span class="required" style="float: right;position: relative;bottom: -23px; font-size: 12px;">* 为必填项</span></h4>
							</div>

							<div class="modal-body">
								<form class="form-horizontal" id="upload-form" method="post" action="{:U('Upload/upload')}">
									<div class="form-group">
										<label class="col-sm-3 control-label">Species: <span class="required">*</span></label>
										<div class="col-sm-6" style="width: 70%">
											<select id="upload-species" name="species" class="form-control" style="padding-left: 8px;">
												<option value="Human">Human</option>
												<option value="Mouse">Mouse</option>
												<option value="Others">Others</option>
											</select>
										</div>
									</div>
									<div class="form-group">
										<label for="upload-gene" class="col-sm-3 control-label">Gene: <span class="required">*</span></label>
										<div class="col-sm-6" style="width: 70%">
											<input type="text" class="form-control" id="upload-gene" name="gene" autocomplete="off" placeholder="gene" onfocus="focusOn(this)" onblur="focusOff(this)" />
											<div class="error-tips error-gene" style="display:none;">基因名不能为空</div>
										</div>
									</div>
									<div class="form-group">
										<label for="upload-forward-primer" class="col-sm-3 control-label">Forward Primer: <span class="required">*</span></label>
										<div class="col-sm-6" style="width: 70%;padding-top: 8px;">
											<input type="text" class="form-control" id="upload-forward-primer" name="forwardprimer" autocomplete="off" placeholder="Forward Primer" onfocus="focusOn(this)" onblur="checkForwardPrimer(this)"/>
											<div class="error-tips error-forwardprimer" style="display:none;"></div>
										</div>
									</div>
									<div class="form-group">
										<label for="upload-reverse-primer" class="col-sm-3 control-label">Reverse Primer: <span class="required">*</span></label>
										<div class="col-sm-6" style="width: 70%;padding-top: 10px;">
											<input type="text" class="form-control" id="upload-reverse-primer" name="reverseprimer" value="" autocomplete="off" placeholder="Reverse Primer" onfocus="focusOn(this)" onblur="checkReversePrimer(this)" />
											<div class="error-tips error-reverseprimer" style="display:none;"></div>
										</div>
									</div>
									<div class="form-group">
										<label for="upload-tm" class="col-sm-3 control-label">TM: </label>
										<div class="col-sm-6" style="width: 70%">
											<input type="text" class="form-control" id="upload-tm" name="tm" placeholder="TM" autocomplete="off" onblur="" />
											<div class="error-tips error-tm" style="display:none;"></div>
										</div>
									</div>
									<div class="form-group">
										<label for="upload-productgc" class="col-sm-3 control-label">Product GC(%): </label>
										<div class="col-sm-6" style="width: 70%;padding-top: 2px;">
											<input type="text" class="form-control" id="upload-productgc" name="productgc" placeholder="Product GC" autocomplete="off" onblur="" />
											<div class="error-tips error-productgc" style="display:none;"></div>
										</div>
									</div>
									<div class="form-group">
										<label for="upload-productlength" class="col-sm-3 control-label">Product Length: </label>
										<div class="col-sm-6" style="width: 70%;padding-top: 12px;">
											<input type="text" class="form-control" id="upload-productlength" name="productlength" placeholder="Product Length" autocomplete="off" onblur="" />
											<div class="error-tips error-productlength" style="display:none;"></div>
										</div>
									</div>
									<div class="form-group">
										<label class="col-sm-3 control-label">Location: <p class="small-font" style="font-style: oblique;">(example:loc_lab104)</p></label>
										<div class="col-sm-6" style="width: 70%;padding-top: 8px;">
											<input type="text" class="form-control" id="upload-location" name="location" placeholder="Location" autocomplete="off" onblur="checkLocation(this)" />
											<div class="error-tips error-location" style="display:none;"></div>
										</div>
									</div>
									<div class="form-group">
										<label for="upload-identifier" class="col-sm-3 control-label">Identifier: <p class="small-font" style="font-style: oblique;">(example:Id_xxx)</p></label>
										<div class="col-sm-6" style="width: 70%;padding-top: 8px;">
											<input type="text" class="form-control" id="upload-identifier" name="identifier" placeholder="Identifier" autocomplete="off" onblur="checkIdentifier(this)" />
											<div class="error-tips error-identifier" style="display:none;"></div>
										</div>
									</div>
									<div class="form-group">
										<label for="upload-describe" class="col-sm-3 control-label">Describe: </label>
										<div class="col-sm-6" style="width: 70%;padding-top: 8px;">
											<textarea class="form-control" id="upload-describe" placeholder="Describe" name="describe" autocomplete="off" ></textarea>
										</div>
									</div>
								</form>
							</div>

							<div class="modal-footer">
								<button id="upload-btn" type="button" style="width: 29%" class="btn btn-danger" onclick="manageUploadPrimer()">Upload</button>
								<button id="example-btn" type="button" style="width: 10%" class="btn btn-default" onclick="manageUploadExample(this)">
									<span>?</span>
								</button>
								<button id="reset-btn" type="button" style="width: 25%" class="btn btn-default" onclick="myManageUploadReset(this)"> Reset </button>
								<button id="cancel-btn" type="button" style="width: 29%" class="btn btn-default globalLogin" data-dismiss="modal"">Cancel</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- uploadFile Modal -->
		<div class="modal fade" id="uploadFileModal" role="dialog">
			<div style="display: table;width: 100%;height: 100%;">
				<div style="vertical-align: middle;display: table-cell;">
					<div class="modal-dialog modal-sm" style="width:550px;">
						<div class="modal-content" data-whatever="uploadFile">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
								<h4 class="modal-title" style="font-size: 18px;color: #000;">Upload File</h4>
							</div>

							<div class="modal-body">
								<!-- <form class="form-horizontal" id="upload-form" method="post" action="{:U('Upload/upload')}"> -->
								<div class="form-group">
									<div style="padding-left: 3%;"><h4>第一步：</h4> </div>
									<center>
										<form class="form-horizontal" action="" method="" >
											<div class="form-group ">
												<label class="col-sm-2 control-label">下载模板:</label>

												<!-- <p class="help-block">仅支持csv格式，大小不超过2.0M</p>   -->

												<div class="col-sm-10 input-group">
													<span class="input-group-btn">
														<button class="btn btn-default" style="border-radius: 0px;border-top-left-radius: 4px;border-bottom-left-radius: 4px;" type="button" onclick="downloadExample();"><span class="glyphicon glyphicon-download-alt"></span> Download</button>
													</span>
													<input class="form-control" style="width:95%;border-top-right-radius: 4px;border-bottom-right-radius: 4px;" disabled="disabled" value="下载上传文件模板，参照格式填写引物信息" type="text">
												</div>
											</div>
										</form>
									</center>
								</div>
								<div class="form-group">
									<div style="padding-left: 3%;"><h4>第二步：</h4> </div>
									<form id="uploadfile-form" class="form-horizontal" action="{:U('Upload/uploadFile')}" method="POST" enctype="multipart/form-data">

										<center>

											<div class="form-group">
												<label class="col-sm-2 control-label">选择文件:<p class="small-font" style="font-style: oblique;">(Only CSV)</p></label>

												<!-- <p class="help-block">仅支持csv格式，大小不超过2.0M</p>   -->

												<div class="col-sm-10 input-group" style="padding-top: 10px;">
													<input id="lefile" type="file" name="file" style="display:none" onchange="change(this);">
													<span class="input-group-btn">
														<button class="btn btn-default" style="border-radius: 0px;border-top-left-radius: 4px;border-bottom-left-radius: 4px;" type="button" onclick="browse();"><span class="glyphicon glyphicon-folder-open"></span> Browse </button>
													</span>
													<input id="filename" class="form-control" style="width:95%;border-top-right-radius: 4px;border-bottom-right-radius: 4px;" disabled="disabled" type="text">
												</div>
												<div class="error-tips error-filename" style="display:none;"></div>
											</div>
										</center>
									</form>
								</div>
							</div>

							<div class="modal-footer">
								<button id="uploadFile-btn" type="button" style="float: left;width: 48%;" class="btn btn-danger" onclick="submitUploadFile()">Upload File</button>
								<button id="cancel-btn" type="button" style="margin-left:52%;width: 48%;" class="btn btn-micv5 btn-block globalLogin" data-dismiss="modal"">Cancel</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<footer id="footer"  >

		</footer>

		<script>
			$('#Modal').on("show.bs.modal", function(event) {
				$('#modal-login').attr('style', 'display:block');
				$('#modal-register').attr('style', 'display:none');
			});

			$('#deleteModal').on("show.bs.modal", function(event) {
				var button = $(event.relatedTarget);
				var id = button.attr('data-id');
				// console.log(id);
				$('#delete-input').val(id);
			});

			$('#editModal').on("show.bs.modal", function(event) {
				var button = $(event.relatedTarget);
				var id = button.attr('data-id');
				$('#'+id).attr('checked', 'checked');
				var info = Array();
				$("input:checked").closest("tr").find("td").each(function(i, eleDom){
				    // 遍历每个被选中的复选框所在行的文本框的值, 看你怎么用了，你要哪个
				    // console.log('第 ' + (i+1) + ' 个文本框的值: ' + eleDom.textContent);
				    info[i] = eleDom.textContent;
				});
				initEditModal();
				editModal(info);
			});

			$('#editModal').on("hide.bs.modal", function(event) {
				$('.checkbox').removeAttr('checked');
			});

			$(document).ready(function() {
				$('#brower-manage').dataTable({
					"fixedHeader": true,
					"dom": 'Blfrtip',
					"lengthMenu": [[15, 30, 50, 100,-1], [15, 30, 50,100, "All"]],
					// "pageLength": 3,
					"buttons": ['copy', 'csv', 'colvis',
						{
							// 按钮显示文本
			                text: 'Upload',
			                // 为按钮添加属性
			                attr: {
			                	'data-target': '#uploadModal',
			                	'data-toggle': 'modal',
			                },
			                // 为按钮添加class
			                className: 'btn-primary',
			                // 点击按钮执行的操作
			                action: function ( e, node, config ) {
			                	// console.log(config);
			                	$('#uploadModal').on('show.bs.modal', function(event) {
			                		// console.log("upload");
			                	});
			                },

						},
						{
			                text: 'Upload File',
			                attr: {
			                	'data-target': '#uploadFileModal',
			                	'data-toggle': 'modal',
			                },
			                className: 'btn-primary',
			                action: function ( e, node, config ) {
			                	$('#uploadFileModal').on('show.bs.modal', function(event) {

		                		});
			                }
						},

					],
					"order": [
						[ 12, "desc" ]
					],

				})
			});
		</script>
	</body>
</html>
